<template>
  <div ref="comparison" :style="{width: '100%', height: '400px'}"></div>
</template>

<script>
  export default {
    mounted() {
      this.myChart();
    },
    methods: {
      myChart() {
        let myChart = this.$echarts.init(this.$refs.comparison);

        var dataYijia5 = [
          ['较好', '最好', '基本', '不足', '不足', '餐前血糖', '饮食辅导', '价格']
        ];
        var dataMix2 = [
          ['较好', '较好', '不足', '中等', '基本', '餐前血糖', '饮食辅导', '安全性']
        ];
        var dataMeizu7 = [
          ['较好', '最好', '基本', '较好', '较好', '空腹血糖', '胰岛素促分泌', '依从性']
        ];
        var schema = [
          {
            name: 'cpu',
            index: 0,
            text: '认知:糖尿病诊断与分型'
          },
          {
            name: 'RAM',
            index: 1,
            text: '认知:糖尿病长期管理'
          },
          {
            name: 'ROM',
            index: 2,
            text: '认知:初始诊断用药'
          },
          {
            name: '电池',
            index: 3,
            text: '认知:并发症控制'
          },
          {
            name: '主屏尺寸',
            index: 4,
            text: '认知:胰岛素使用'
          },
          {
            name: '屏占比',
            index: 5,
            text: '控糖指标偏好'
          },
          {
            name: '后摄数',
            index: 6,
            text: '控糖方法偏好'
          },
          {
            name: '价格',
            index: 7,
            text: '药物价格敏感程度'
          }
        ];
        var lineStyle = {
          normal: {
            width: 3,
            opacity: 1
          }
        };

        var option = {
          textStyle:{
            color: '#fff'
          },
          color: ['#7b9e02', '#deb81b', '#e85656'],
          title: {
            text: '',
            subtext: ''
          },

          legend: {
            data: ['2018年1季度', '2018年2季度', '2018年3季度'],
            bottom: 1
          },
          parallelAxis: [{
            dim: 0,
            name: schema[0].text,
            type: 'category',
            data: ['不足', '基本', '中等', '较好', '最好']
          },
            {
              dim: 1,
              name: schema[1].text,
              type: 'category',
              data: ['不足', '基本', '中等', '较好', '最好']
            },
            {
              dim: 2,
              name: schema[2].text,
              type: 'category',
              data: ['不足', '基本', '中等', '较好', '最好']
            },
            {
              dim: 3,
              name: schema[3].text,
              type: 'category',
              data: ['不足', '基本', '中等', '较好', '最好']
            },
            {
              dim: 4,
              name: schema[4].text,
              type: 'category',
              data: ['不足', '基本', '中等', '较好', '最好']
            },
            {
              dim: 5,
              name: schema[5].text,
              type: 'category',
              data: ['餐前血糖', '餐后血糖', '随机血糖', '空腹血糖']
            },
            {
              dim: 6,
              name: schema[6].text,
              type: 'category',
              data: ['胰岛素促分泌', '让胰岛休息', '饮食辅导', '运动辅导']
            },
            {
              dim: 7,
              name: schema[7].text,
              type: 'category',
              data: ['价格', '安全性', '效果', '依从性']
            },
          ],
          parallel: {
            left: '5%',
            right: '13%',
            bottom: '15%',
            top: '16%',
            parallelAxisDefault: {
              type: 'value',
              nameLocation: 'end',
              nameGap: 20
            }
          },
          series: [{
            name: '2018年1季度',
            type: 'parallel',
            lineStyle: lineStyle,
            smooth: 0.2,
            data: dataYijia5
          },
            {
              name: '2018年2季度',
              type: 'parallel',
              lineStyle: lineStyle,
              smooth: 0.2,
              data: dataMix2
            },
            {
              name: '2018年3季度',
              type: 'parallel',
              lineStyle: lineStyle,
              smooth: 0.2,
              data: dataMeizu7
            }

          ]
        };

        myChart.setOption(option);




      }
    }
  }
</script>

<style scoped>

</style>
